/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import Navbars from "../../computents/Navbars";
import styles from "./css/reg.module.css";
import { Button, Form, Input, Toast } from "antd-mobile";
import { RegApi } from "../../api/info";
function reg() {
  const [form] = Form.useForm();
  const onFinish = async (values) => {
    try {
      const { data: res } = await RegApi(values);
      console.log(res);
      Toast.show({
        icon: "success",
        content: "注册成功",
      });
    } catch {
      Toast.show({
        icon: "fail",
        content: "名称已存在",
      });
    }
  };
  return (
    <div className={styles.box}>
      <Navbars />
      <div className={styles.reg}>
        <h1>注册账户</h1>
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <Button block type="submit" color="danger" size="large">
              注册
            </Button>
          }
        >
          <Form.Item
            name="username"
            label="姓名"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="电子邮件"
            rules={[
              { required: true, message: "电子邮件不能为空" },
              { type: "string", min: 6 },
              { type: "email", warningOnly: true },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="name"
            label="电话"
            rules={[{ required: true, message: "电话不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="names"
            label="出生日期"
            rules={[{ required: true, message: "出生日期不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "密码不能为空" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default reg;
